<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Declarative Rendering</title>
        <script type="text/javascript" src="../../node_modules/vue/dist/vue.js"></script>
        <style>
            @media screen and (min-width: 960px) {
                body {
                    width: 960px;
                    margin: 0 auto;
                }
            }

            h6 {
                margin: 0;
                margin-top: 8px;
                padding-top: 3px;
                border-top: 2px solid #1a5ae4;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <h6>表达式:</h6>
            {{message}}
            <h6>控制标签的属性:</h6>
            <span v-bind:custom-prop="prop">Inspect me</span>
            <h6>条件判断:</h6>
            <label>
                <input type="checkbox" v-model="isShow">
                {{isShow ? '显示中' : '隐藏中'}}
            </label>
            <span v-if="isShow">点击 checkbox 控制我的可见性</span>
            <h6>循环:</h6>
            <ol>
                <li v-for="todo in todos" v-text="todo.text"></li>
            </ol>
            <h6>交互:</h6>
            <div>{{reverses}}</div>
            <button v-on:click="reverseMessage">Reverse Message</button>
            <h6>双向绑定:</h6>
            <div>{{twoWayData}}</div>
            <input type="text" v-model="twoWayData">
            <br>
            <button @click="setData">设置数据</button>
            <h6>自定义组件</h6>
            <ol>
                <todo v-for="todo in todos" v-bind:item="todo"></todo>
            </ol>
        </div>
        <script type="text/javascript" src="intro.js"></script>
    </body>
</html>